<template>
  <div id="app">
    <div v-if="$store.state.app.screenWidth<=992" class="mobileBlock">
      <div class="signText">请您尽快到电脑端审阅并签署代理协议！</div>
    </div>
    <div  v-if="$store.state.app.screenWidth>992" class="div_block">
      <div class="div_agreement_title">{{ agreementTitle }}</div>
      <div class="div_agreement">
        <div class="div_agreement_content" v-html="agreementContent"></div>
      </div>
      <div class="div_sign">
<!--        <el-button type="shenda" @click="sign" icon="el-icon-edite" :disabled="time>0" style="background: #005bea;color:#fff;border:1px solid #005bea">签署<span v-if="time>0">( {{time}} 秒 )</span></el-button>-->
        <el-button type="primary" @click="sign" icon="el-icon-edite" :disabled="time>0">签署<span v-if="time>0">( {{time}} 秒 )</span></el-button>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showCavasDialog"
      width="50%"
      center>
      <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
      <img class="view-image" :src="value" width="200" height="100" v-if="value">
      <span slot="footer" class="dialog-footer">
<!--        <el-button type='shenda' @click="showCavasDialog = false"  style="background: #fff;color:#005bea;border:1px solid #005bea">取 消</el-button>-->
<!--        <el-button type='shenda' @click="canvasClear" style="background: #fff;color:#005bea;border:1px solid #005bea">清 空</el-button>-->
<!--        <el-button type="shenda" @click="saveAsImg" v-if='index<length' v-preventReClick style="background: #005bea;color:#fff;border:1px solid #005bea">下一份</el-button>-->
<!--        <el-button type="shenda" @click="saveAsImg" v-if="index==length" v-preventReClick style="background: #005bea;color:#fff;border:1px solid #005bea">提 交</el-button> -->
        <el-button type='shenda' @click="showCavasDialog = false" >取 消</el-button>
        <el-button type='shenda' @click="canvasClear" s>清 空</el-button>
        <el-button type="primary" @click="saveAsImg" v-if='index<length' v-preventReClick >下一份</el-button>
        <el-button type="primary" @click="saveAsImg" v-if="index==length" v-preventReClick >提 交</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import {agentSignAgreement,getAgentAgreement} from '@/api/getData'

export default {
  name: '',
  data() {
    return {
      agreementId: '',
      agreementTitle: '',
      agreementContent: '',
      agreementList: [],
      showCavasDialog: false,
      value: null,
      options: {
        lastWriteSpeed: 1,  //书写速度 [Number] 可选
        lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
        lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
        lineJoin: 'round',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 500, //canvas宽高 [Number] 可选
        canvasHeight: 300,  //高度  [Number] 可选
        isShowBorder: true, //是否显示边框 [可选]
        bgColor: '#f2f2f2', //背景色 [String] 可选 注:这背景色仅仅只是canvas背景,保存的图片仍然是透明的
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#e6e6e6", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: '#101010', // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: 'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
      index: 0,
      length: 0,
      pagekey: '',
      time: 20,
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let returnData = await getAgentAgreement({})
      if (returnData._result) {
        if (returnData.data&&returnData.data.length>0) {
          localStorage.setItem('signStatus',false);
          returnData.data.forEach((item, index) => {
            this.agreementList.push(item);
          })
          this.agreementId = this.agreementList[0].id;
          this.agreementTitle = this.agreementList[0].title;
          this.agreementContent = this.agreementList[0].content;
          this.agreementSignId = this.agreementList[0].userAgreementId;
          this.index = 1;
          this.length = this.agreementList.length;
          this.countdown()
        }
        else if (returnData.data.length==0) {
          localStorage.setItem('signStatus',true);
          this.$router.push({path: '/'})
        }
      }
    },
    countdown(){
      let _this = this;
      let countdown = setInterval(function (){
        _this.time = parseInt(_this.time) -1;
        if(_this.time<1){
          _this.time = 0
          clearInterval(countdown)
        }
      },1000)
    },
    async sign() {
      this.pagekey = await this.$getPageKey();
      this.showCavasDialog = true;
    },
    /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },
    /**
     * 保存图片
     */
    async saveAsImg() {
      const img = this.$refs.SignCanvas.saveAsImg();
      let returnData = await agentSignAgreement({
        pagekey: this.pagekey,
        id: this.agreementSignId,
        userAgreementId: this.agreementSignId,
        agreementId: this.agreementId,
        userSign:img,
      })
      if(returnData._result){
        if(returnData.code==10000){
          this.$message({
            type: 'success',
            message: '签名已提交'
          })
          this.index ++;
          this.showCavasDialog = false;
          this.time = 20;
        }
        if(this.index>this.length){
          localStorage.setItem('signStatus',true)
          this.$router.push({path: '/'})
        }else{
          let i = this.index -1;
          this.agreementId = this.agreementList[i].id;
          this.agreementTitle = this.agreementList[i].title;
          this.agreementContent = this.agreementList[i].content;
          this.agreementSignId = this.agreementList[i].userAgreementId;
          this.countdown()
        }
      }

    },

  }
}
</script>
<style scoped>
.mobileBlock{
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.signText{
  width: 90%;
  height: auto;
  line-height: 30px;
}
.div_block {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  background: #f2f2f2;
}

.div_agreement_title {
  width: 80%;
  max-width: 1000px;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-y: scroll;
}

.div_agreement {
  width: 80%;
  max-width: 1000px;
  height: 80%;
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: inline-flex;
  margin: 20px 0;
  background: #f7f7f7;
}

.div_agreement_content {
  width: 90%;
  height: 90%;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: scroll;
  padding: 5%;
}

.div_sign {
  width: 1000px;
  height: 60px;
  position: relative;
  top: 0;
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

.title {
  padding: 20px;
  text-align: center;
}

.sign-canvas {
  display: block;
  margin: 20px auto;
}

.view-image {
  display: block;
  margin: 20px auto;
}

.config {
  width: 350px;
  margin: 20px auto;

  .ul-config {
    .li-c {
      display: flex;
      align-items: center;
      padding: 4px 10px;

      .item-label {
        font-size: 14px;
      }

      .item-content {
        margin-left: 10px;
      }
    }
  }
}

.sign-btns {
  display: flex;
  justify-content: space-between;

  #clear,
  #clear1,
  #save {
    display: inline-block;
    padding: 5px 10px;
    width: 76px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eee;
    background: #e1e1e1;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    cursor: pointer;
  }
}
</style>
